<template>
  <el-tabs type="border-card" @tab-click="tabClick" v-model="tab">
    <el-tab-pane label="部门查询" name="dept" v-loading="deptLoading">
      <el-container>
        <el-header>
          <el-form :inline="true" ref="deptForm" :model="deptForm" label-width="80px">
            <el-form-item label="部门">
              <el-input v-model="deptForm.deptId" />
            </el-form-item>
            <el-form-item label="时间">
              <el-input v-model="deptForm.date" />
            </el-form-item>
            <el-form-item label="考试名">
              <el-input v-model="deptForm.examName" />
            </el-form-item>
<!--            <el-form-item label="考试类型">-->
<!--              <el-input v-model="deptForm.type" />-->
<!--            </el-form-item>-->
            <el-form-item>
              <el-button type="primary" @click="deptSubmit">查询</el-button>
              <el-button>导出</el-button>
            </el-form-item>
          </el-form>
        </el-header>
        <el-main>
          <el-table :data="deptData">
            <el-table-column type="index" label="序号" />
            <el-table-column prop="deptName" label="部门名称" />
            <el-table-column prop="examName" label="考试名称" />
<!--            <el-table-column prop="type" label="考试类型">-->
<!--              <template slot-scope="scope">-->
<!--                {{parseInt(scope.row.type) === 1 ? '正式考试' : parseInt(scope.row.type) === 2 ? '模拟考试'-->
<!--                :'三违考试'}}-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column prop="examStartTime" label="考试开始时间" />
            <el-table-column label="参加人数/及格分数">
              <template slot-scope="scope">{{`${scope.row.examUserNum} / ${scope.row.passMark}`}}</template>
            </el-table-column>
            <el-table-column label="及格/未及格人数">
              <template
                slot-scope="scope"
              >{{`${scope.row.passUserNum} / ${scope.row.noPassUserNum}`}}</template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="deptLimit"
            @current-change="deptPage"
            :current-page="deptPages.page"
            :page-sizes="[10, 20, 50]"
            :page-size="deptPages.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="deptTotal"
          ></el-pagination>
        </el-main>
      </el-container>
    </el-tab-pane>
    <el-tab-pane label="个人查询" name="personal" v-loading="personalLoading">
      <el-container>
        <el-header>
          <el-form :inline="true" ref="personalForm" :model="personalForm" label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="personalForm.name"></el-input>
            </el-form-item>
            <el-form-item label="部门">
              <el-input v-model="personalForm.cateId"></el-input>
            </el-form-item>
            <el-form-item label="工种">
              <el-input v-model="personalForm.cateId"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input v-model="personalForm.id"></el-input>
            </el-form-item>
            <el-form-item label="考试名">
              <el-input v-model="personalForm.name"></el-input>
            </el-form-item>
            <el-form-item label="是否及格">
              <el-input v-model="personalForm.name"></el-input>
            </el-form-item>
            <el-form-item label="是否补考">
              <el-input v-model="personalForm.name"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="personalSubmit">查询</el-button>
              <el-button>导出</el-button>
            </el-form-item>
          </el-form>
        </el-header>
        <el-main>
          <el-table :data="personalData">
            <el-table-column type="index" label="序号" />
            <el-table-column prop="realname" label="姓名" />
            <el-table-column prop="deptName" label="部门" />
            <el-table-column prop="examName" label="考试名称" />
<!--            <el-table-column prop="type" label="考试类型">-->
<!--              <template slot-scope="scope">-->
<!--                {{parseInt(scope.row.type) === 1 ? '正式考试' : parseInt(scope.row.type) === 2 ? '模拟考试'-->
<!--                :'三违考试'}}-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column prop="passMark" label="及格分数" />
            <el-table-column prop="score" label="成绩" />
            <el-table-column prop="address" label="是否及格">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.isPass" type="success">及格</el-tag>
                <el-tag v-else type="danger">未及格</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="开始时间" />
            <!--<el-table-column prop="address" label="身份证号"/>-->
            <!--<el-table-column prop="address" label="是否补考"/>-->
          </el-table>
          <el-pagination
            @size-change="personalLimit"
            @current-change="personalPage"
            :current-page="personalPages.page"
            :page-size="personalPages.limit"
            :page-sizes="[10, 20, 50]"
            layout="total, sizes,prev, pager, next, jumper"
            :total="personalTotal"
          ></el-pagination>
        </el-main>
      </el-container>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: 'dept-summary',
  data: _ => ({
    deptLoading: false,
    personalLoading: false,
    tab: 'dept',
    deptForm: {
      cateId: '',
      date: '',
      name: '',
      type: ''
    },
    deptData: [],
    personalForm: {
      cateId: '',
      date: '',
      name: '',
      type: ''
    },
    personalData: [],
    deptPages: {
      page: 1,
      limit: 10
    },
    personalPages: {
      page: 1,
      limit: 10
    },
    deptTotal: 0,
    personalTotal: 0
  }),
  mounted() {
    this.deptSubmit(1)
  },
  methods: {
    tabClick({ name }) {
      if (name === 'dept') {
        this.deptSubmit(1)
      } else {
        this.personalSubmit(1)
      }
    },
    deptSubmit(page) {
      this.deptLoading = true
      if (page) this.deptPages.page = page
      this.$http({
        url: this.$http.adornUrl('/exam-admin/sta/dept'),
        method: 'post',
        data: Object.assign(this.deptForm, this.deptPages)
      })
        .then(res => {
          this.deptTotal = res.data.totalCount
          this.deptData = res.data.list
          this.deptLoading = false
        })
        .catch(_ => {
          this.deptLoading = false
        })
    },
    personalSubmit(page) {
      this.personalLoading = true
      if (page) this.personalPages.page = page
      this.$http({
        url: this.$http.adornUrl('/exam-admin/sta/user'),
        method: 'post',
        data: Object.assign(this.personalForm, this.personalPages)
      })
        .then(res => {
          this.personalTotal = res.data.totalCount
          this.personalData = res.data.list
          this.personalLoading = false
        })
        .catch(_ => {
          this.personalLoading = false
        })
    },
    deptLimit(val) {
      this.deptPages = {
        page: 1,
        limit: val
      }
      this.deptSubmit()
    },
    deptPage(val) {
      this.deptPages.page = val
      this.deptSubmit()
    },
    personalLimit(val) {
      this.personalPages = {
        page: 1,
        limit: val
      }
      this.personalSubmit()
    },
    personalPage(val) {
      this.personalPages.page = val
      this.personalSubmit()
    }
  }
}
</script>

<style scoped>
</style>
